<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
    
    <title>Chat</title>
    
    <link rel="stylesheet" href="style.css?<?php echo date('Ymd-H:i:s');?>" type="text/css" />

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="chat.js?<?php echo date('Ymd-H:i:s');?>"></script>
	<script type="text/javascript">

     var chat = new Chat();

     $(function() {

         chat.validateUsername();
         chat.getState();

         //watch textarea for key presses
         $("#sendie").keydown(function(event) {
             var key = event.which;

             //all keys including return.
             if(key >= 33) {
                 var maxLength = $(this).attr("maxlength");
                 var length = this.value.length;

                 //don't allow new content if length is maxed out
                 if(length >= maxLength) {
                     event.preventDefault();
                 }
             }
         });

         //watch textarea for key release
         $('#sendie').keyup(function(e) {
             if(e.keyCode == 13) {
                 var text = $(this).val();
                 var maxLength = $(this).attr("maxlength");
                 var length = text.length;

                 // send
                 if(length <= maxLength + 1) {
                     chat.send(text);
                     $(this).val("");
                 } else {
                     $(this).val(text.substring(0, maxLength));
                 }
             }
         });
     });
	</script>
</head>

<body onload="setInterval('chat.update()', 1000)">
	<div id="page-wrap">
        <div id="title-wrap">
            <div id="title-area">Chat</div>
		    <div id="name-area" onclick="chat.validateUsername()">
                Username: <span id="username"></span>
            </div>
		</div>

        <div id="server-msg" class="hide-msg">No current error</div>

        <div id="chat-room-menu">
            <div id="chat-room-menu-title"> Rooms </div>
            <div class="chat-room">
                <div class="chat-room-title">Java Jungle</div>
                <div class="chat-room-num-users">Users chatting: <strong class="num-users">0</strong></div>
            </div>
            <div class="chat-room">
                <div class="chat-room-title">PHP Palace</div>
                <div class="chat-room-num-users">Users chatting: <strong class="num-users">0</strong></div>
            </div>
        </div>

	    <div id="chat-wrap">
		    <div id="chat-area"></div>
	    </div>		
	    
        <div class="send-wrap">
            <div class="send-inst">
                Your message: 
            </div>
            <div style="display: table-cell">
		        <form id="send-message-area">
			        <textarea id="sendie" maxlength='100'></textarea>	
		        </form>	
            </div>
        </div>
	</div>
</body>
</html>